<template>
  <view class="payment-result">
    <view class="result-icon" :class="status === 'success' ? 'success' : 'fail'">
      <el-icon :name="status === 'success' ? 'success' : 'fail'"></el-icon>
    </view>
    
    <view class="result-title" :class="status === 'success' ? 'success' : 'fail'">
      {{ status === 'success' ? '支付成功' : '支付失败' }}
    </view>
    
    <view class="result-info" v-if="status === 'success'">
      <view class="info-item">
        <view class="item-label">订单编号</view>
        <view class="item-value">{{ orderInfo.orderNo }}</view>
      </view>
      <view class="info-item">
        <view class="item-label">支付方式</view>
        <view class="item-value">{{ paymentMethod }}</view>
      </view>
      <view class="info-item">
        <view class="item-label">支付金额</view>
        <view class="item-value">¥{{ orderInfo.totalAmount }}</view>
      </view>
      <view class="info-item">
        <view class="item-label">支付时间</view>
        <view class="item-value">{{ paymentTime }}</view>
      </view>
    </view>
    
    <view class="result-actions">
      <el-button type="text" @click="goToOrderDetail">查看订单</el-button>
      <el-button type="primary" @click="goToHome">返回首页</el-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderId: '',
      status: 'success',
      orderInfo: {},
      paymentMethod: '',
      paymentTime: ''
    }
  },
  onLoad(options) {
    this.orderId = options.orderId
    this.status = options.status || 'success'
    if (this.status === 'success') {
      this.getOrderDetail()
    }
  },
  methods: {
    async getOrderDetail() {
      try {
        const res = await this.$api.get(`/order/detail/${this.orderId}`)
        this.orderInfo = res
        
        // 设置支付方式名称
        switch (res.paymentMethod) {
          case 'wxpay':
            this.paymentMethod = '微信支付'
            break
          case 'alipay':
            this.paymentMethod = '支付宝'
            break
          case 'balance':
            this.paymentMethod = '余额支付'
            break
          default:
            this.paymentMethod = '其他支付'
        }
        
        // 设置支付时间
        this.paymentTime = res.paymentTime || new Date().toLocaleString()
      } catch (error) {
        this.$toast.fail(error.message || '获取订单详情失败')
      }
    },
    goToOrderDetail() {
      uni.navigateTo({
        url: `/pages/order/detail?id=${this.orderId}`
      })
    },
    goToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style>
.payment-result {
  background-color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 15px;
}
.result-icon {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.success {
  color: #19be6b;
}
.fail {
  color: #f56c6c;
}
.result-icon .el-icon {
  font-size: 48px;
}
.result-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
}
.result-info {
  width: 100%;
  margin-bottom: 50px;
}
.info-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.info-item:last-child {
  border-bottom: none;
}
.item-label {
  width: 100px;
  font-size: 14px;
  color: #666;
}
.item-value {
  flex: 1;
  font-size: 14px;
  color: #333;
  text-align: right;
}
.result-actions {
  display: flex;
  width: 100%;
  padding: 0 15px;
}
.result-actions .el-button {
  flex: 1;
  margin: 0 10px;
  height: 45px;
  line-height: 45px;
  border-radius: 22.5px;
}
</style>    